<template>
  <div id="classmsg">
    <!-- 用户列表导航 -->
    <template>
      <div class="cic-breadcrumb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>校园管理</el-breadcrumb-item>
          <el-breadcrumb-item>班级管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </template>

    <!--视图 -->
    <el-card>
      <template>
        <div>
          <el-row>
            <!-- 搜索信息 start-->
            <el-col :span="2">查询班级信息:</el-col>
            <!-- 搜索框-->
            <el-col :span="6">
              <el-form :model="form">
                <el-col :span="3">
                  <el-form-item>
                    <el-select v-model="form.collegeId" placeholder="请选择学院">
                      <el-option
                        v-for="(item,index) in collegeList "
                        :key="index"
                        :value="item.name"
                        @click.native="getColId(index)"
                      >{{item.name}}</el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="3" :offset="11">
                  <el-form-item>
                    <el-select v-model="form.majorId" placeholder="请选择专业">
                      <el-option
                        v-for="(item,index) in majorList "
                        :key="index"
                        :value="item.name"
                        @click.native="getMajorId(index)"
                      >{{item.name}}</el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-form>
            </el-col>
            <el-col :span="2" :offset="3">
              <el-button size="medium" type="primary" @click="selectytClassById()">查询</el-button>
            </el-col>
            <!-- 搜索信息 end-->

            <el-col :span="2" :offset="2">
              <el-button type="primary" class="icon_position" @click="dialogFormVisible = true">添加</el-button>
            </el-col>
          </el-row>
        </div>
      </template>
      <!-- 教师详细信息 start-->
      <template>
        <div class="cic-table">
          <el-table :data="tableData">
            <el-table-column prop="clazzId" label="班级编号" width="220"></el-table-column>
            <el-table-column prop="majorId" label="专业编号" width="220"></el-table-column>
            <el-table-column prop="name" label="班级名称" width="180"></el-table-column>
          </el-table>
          <!-- 教师详细信息 end-->
        </div>
      </template>
      <!-- 分页区域 start-->
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="skipPage"
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage"
      ></el-pagination>
      <!-- 分页区域 end-->
    </el-card>

    <!-- 弹出框-->

    <el-dialog title="添加班级" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item>
          <el-select v-model="form.collegeId" placeholder="请选择学院">
            <el-option
              v-for="(item,index) in collegeList "
              :key="index"
              :value="item.name"
              @click.native="getColId(index)"
            >{{item.name}}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="form.majorId" placeholder="请选择专业">
            <el-option
              v-for="(item,index) in majorList "
              :key="index"
              :value="item.name"
              @click.native="getMajorId(index)"
            >{{item.name}}</el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="班级名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addClass()">确 定</el-button>
        <!-- 弹出框end-->
      </div>
    </el-dialog>

    <!-- From 结束 -->
  </div>
</template> 
     
  

<script>
export default {
  inject: ["reload"],
  data() {
    return {
      value: true,
      // 表格数据
      tableData: [],
      total: 0,
      pages: 0,
      pageSize: 8,
      currentPage: 1,
      // 表格数据end
      value: "",
      dialogTableVisible: false,
      formLabelWidth: "120px",
      showContent: false,
      dialogFormVisible: false,
      form: {
        collegeId: "",
        name: ""
      },
      college: {
        collegeId: -1,
        name: ""
      },
      major: {
        majorId: "",
        name: ""
      },
      // 下拉框数组
      collegeList: [],
      majorList: []
    };
  },
  created() {
    this.selectCollege();
    // this.selectMajor();
  },
  methods: {
    getMajorId(index) {
      this.major.majorId = this.majorList[index].majorId;
    },
    // 获取学院ID并查询学院专业信息
    getColId(index) {
      this.college.collegeId = this.collegeList[index].collegeId;

      this.$get(
        this.$urlPath.school +
          "/school/collage/majors/" +
          this.college.collegeId +
          "/" +
          this.currentPage +
          "/" +
          this.pageSize
      )
        .then(resp => {
          if (resp.code == 200) {
            if (resp.data.list == null) {
              this.tableData = null;
              this.$message({
                message: "暂无数据",
                type: "error"
              });
            } else {
              this.majorList = resp.data.list;
            }
          } else {
            return this.$message.error(resp.message);
          }

          console.log(resp);
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 获取专业ID并查询学院专业信息end
    //  获取所有学院信息
    selectCollege() {
      this.$get(this.$urlPath.school + "/school/colleges")
        .then(resp => {
          if (resp.code == 200) {
            if (resp.data == null) {
              this.tableData = null;
              this.$message({
                message: "暂无数据",
                type: "error"
              });
            } else {
              this.collegeList = resp.data;
            }
          } else {
            return this.$message.error(resp.message);
            console.log(resp);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    //  获取所有学院信息end
    // 根据页码跳转
    skipPage: function(currentPage) {
      this.currentPage = currentPage;
      this.$get(
        this.$urlPath.school + "/school/major/classes/" + this.major.majorId
      )
        .then(resp => {
          if (resp.code == 200) {
            this.tableData = resp.data;
            //  this.pages = resp.data.data.list.pages
            this.total = this.tableData.length;
            this.pageSize = 8;
          } else {
            return this.$message.error(resp.message);
          }

          console.log(resp);
        })
        .catch(error => {
          console.log(error);
        });
    },

    // 添加班级信息
    addClass() {
      let value = this.form.name;
      this.major.name = this.form.name;
      console.log(this.major);

      if (value) {
        this.$post_json(this.$urlPath.school + "/school/class/add", this.major)
          .then(resp => {
            if (resp.code == 200) {
              this.dialogFormVisible = false;
              this.$message({
                type: "success",
                message: "你成功添加: " + value
              });
              this.form.name = "";
              // location.reload();
              this.reload()
            } else {
              return this.$message.error(resp.message);
            }
            console.log(resp);
          })
          .catch(error => {
            console.log(error);
          });
      } else {
        this.$message({
          type: "info",
          message: "输入内容不能为空！"
        });
      }
      (this.showContent = true), (this.dialogFormVisible = true);
    },
    // 添加专业信息end

    // 根据专业id查询学院专业下的班级信息
    selectytClassById() {
      this.$get(
        this.$urlPath.school + "/school/major/classes/" + this.major.majorId
      )
        .then(resp => {
          if (resp.code == 200) {
            if (resp.data == null) {
              this.tableData = null;
              this.$message({
                message: "暂无数据",
                type: "error"
              });
            } else {
              this.tableData = resp.data;
              //  this.pages = resp.data.data.list.pages
              this.total = this.tableData.length;
              this.pageSize = 8;
            }
          } else {
            return this.$message.error(resp.message);
          }
          console.log("===================================");
          console.log(resp);
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 根据学院id查询学院专业信息end

    open() {
      this.$alert("这是一段内容", "标题名称", {
        confirmButtonText: "确定",
        callback: action => {
          this.$message({
            type: "info",
            message: `action: ${action}`
          });
        }
      });
    }
  }
};
</script>

<style lang="less">
@import "../../assets/less/golbal.less";
@import "../../assets/less/classmsg.less";
</style>